<template>
  <headPage></headPage>
  <div class="main_box information" v-loading="loading">
    <titleBack title="提现账户"></titleBack>
    <div class="account_item">
      <div class="item_img">
        <img src="../../../assets/my/18.png" alt="" />
        <div class="item_name">
          <div class="name_1">微信</div>
          <div class="name_2" v-if="bindStatus.is_wx == 0">未设置</div>
          <div class="name_2" v-else>已设置</div>
        </div>
      </div>
      <div class="btn_2" @click="edit(1)" v-if="bindStatus.is_wx == 0">
        去设置
      </div>
      <div class="btn_1" @click="edit(1)" v-else>修改</div>
    </div>
    <div class="account_item">
      <div class="item_img">
        <img src="../../../assets/my/19.png" alt="" />
        <div class="item_name">
          <div class="name_1">支付宝</div>
          <div class="name_2" v-if="bindStatus.is_alipay == 0">未设置</div>
          <div class="name_2" v-else>已设置</div>
        </div>
      </div>
      <div class="btn_2" @click="edit(2)" v-if="bindStatus.is_alipay == 0">
        去设置
      </div>
      <div class="btn_1" @click="edit(2)" v-else>修改</div>
    </div>
    <div class="account_item">
      <div class="item_img">
        <img src="../../../assets/my/20.png" alt="" />
        <div class="item_name">
          <div class="name_1">银行卡</div>
          <div class="name_2" v-if="bindStatus.is_bank == 0">未设置</div>
          <div class="name_2" v-else>已设置</div>
        </div>
      </div>
      <div class="btn_2" @click="edit(3)" v-if="bindStatus.is_bank == 0">
        去设置
      </div>
      <div class="btn_1" @click="edit(3)" v-else>修改</div>
    </div>
  </div>
  <footerPage></footerPage>

  <!-- 微信和支付宝 -->
  <maskLayer v-model="visible" center append-to-body>
    <div class="modal_content">
      <div class="modal_title">
        <span></span>
        <span>{{ accountName }}账户</span>
        <img @click="closePopup" src="../../../assets/my/22.png" alt="" />
      </div>
      <div class="input_content">
        <div class="input_item">
          <div class="target_name">第一步：</div>
          <div class="input_one">
            <div class="one_1">先获取手机验证码</div>
            <div class="one_2">
              <span class="one_2_1">绑定的用户手机 </span>
              <span class="one_2_2">{{ userInfo.mobile }}</span>
            </div>
            <div class="one_3">
              <div class="one_3_1">
                <el-input
                  v-model="code"
                  placeholder="请输入验证码"
                  placeholder-style="color:#bfbfbf;font-size:7px;"
                  type="number"
                  oninput="if(value.length>4)value=value.slice(0,4)"
                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
                  maxlength="4"
                />
              </div>
              <div class="one_3_2" @click="getCode">{{ codeText }}</div>
            </div>
          </div>
        </div>
        <div class="input_item">
          <div class="target_name">第二步：</div>
          <div class="input_two">
            <div class="two_1">上传{{accountName}}收款二维码</div>
            <div class="two_2">
              <img v-if="!qrcode_url" src="../../../assets/my/24.png" alt="" />
              <img v-else :src="qrcode_url" alt="" />
            </div>
            <div class="two_3">
              支持格式：.jpg .png .svg .gif ，单个文件不能超过5MB
            </div>
          </div>
        </div>
        <div class="input_item">
          <div class="target_name">第三步：</div>
          <div class="input_three">
            <div class="three_1">填写{{accountName}}真实姓名</div>
            <div class="three_2">
              <el-input
                v-model="real_name"
                placeholder="请输入真实姓名"
                placeholder-style="color:#bfbfbf;font-size:7px;"
                maxlength="14"
              />
            </div>
          </div>
        </div>
        <div class="submit" @click="getSubmit">提交</div>
      </div>
    </div>
  </maskLayer>

  <!-- 银行卡 -->
  <maskLayer v-model="visibleCard" center append-to-body>
    <div class="modal_content">
      <div class="modal_title">
        <span></span>
        <span>{{ accountName }}账户</span>
        <img @click="closePopup" src="../../../assets/my/22.png" alt="" />
      </div>

      <div class="card_list" v-if="cardList.length > 0">
        <el-scrollbar>
          <div
            class="card_item"
            v-for="(item, index) in cardList"
            :key="index"
            @click="goCardDetails(item.aid)"
          >
            <div class="card_name">
              <div class="card_name_text">
                <span>{{ item.bank_name }}</span>
                <span class="card_default_text" v-if="item.is_default == 1"
                  >默认</span
                >
              </div>
              <img
                class="card_name_icon"
                src="../../../assets/my/26.png"
                alt=""
              />
            </div>
            <div class="card_number">{{ item.account }}</div>
            <div class="card_date">绑定时间：{{ item.create_time }}</div>
          </div>
        </el-scrollbar>
      </div>
      <div class="no_card" v-else>
        <img src="../../../assets/my/25.png" alt="" />
        <div class="no_text">您还没有绑定银行卡，赶紧去绑定吧~</div>
      </div>
      <div class="bind_btn" @click="bindCard">绑定银行卡</div>
    </div>
  </maskLayer>

  <!-- 添加/编辑银行卡 -->
  <maskLayer v-model="visibleAddCard" center append-to-body>
    <div class="modal_content">
      <div class="modal_title">
        <span></span>
        <span>添加银行卡</span>
        <img @click="closePopup" src="../../../assets/my/22.png" alt="" />
      </div>
      <div class="from_value">
        <div class="from_item">
          <div class="from_item_le">银行名称</div>
          <div class="from_item_ri">
            <el-select
              v-model="selectValue"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="from_item">
          <div class="from_item_le">银行卡号</div>
          <div class="from_item_ri">
            <el-input
              v-model="account"
              placeholder="请输入银行卡号"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="16"
            />
          </div>
        </div>
        <div class="from_item">
          <div class="from_item_le">真实姓名</div>
          <div class="from_item_ri">
            <el-input
              v-model="real_name"
              placeholder="请输入真实姓名"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              maxlength="12"
            />
          </div>
        </div>
        <div class="from_item">
          <div class="from_item_le">手机号</div>
          <div class="from_item_ri">
            <el-input
              oninput="if(value.length>11)value=value.slice(0,11)"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
              v-model="mobile"
              placeholder="请输入手机号"
              placeholder-style="color:#bfbfbf;font-size:7px;"
              type="number"
              maxlength="11"
            />
          </div>
        </div>
        <div class="set_card">
          <div class="set_card_text">设为默认银行卡</div>
          <el-switch
            size="small"
            v-model="value2"
            style="
              --el-switch-on-color: #1f52ae;
              --el-switch-off-color: #ff4949;
            "
          />
        </div>
      </div>

      <!-- <div class="bind_btn" @click="addCard">提交</div> -->
      <div class="edit_btn">
        <div class="edit_btn_1" @click="unbindCard">解绑银行卡</div>
        <div class="edit_btn_2" @click="addCard">提交</div>
      </div>
    </div>
  </maskLayer>
  <modalText
    ref="modal"
    text="确认解绑当前银行卡吗？"
    tip="解绑提醒"
    @confirm="modalConfirm"
  ></modalText>
</template>


<script name="account" setup>
import {
  post6620dcb7cb59a,
  post6620db8c64a54,
  post6620dc2684fd2,
  post6620fd4f2ec24,
  post6621071b9ad6f,
  post5b5bdc44796e8,
  post6620dbd633daa,
  post6620e56ddc277,
  post661f9ea1b8701,
  post65f0402ea59bf,
  post662092c66ee3c
} from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import titleBack from "../titleBack.vue";
import modalText from "@/components/modalText.vue";
import {
  ref,
  reactive,
  onMounted,
  inject,
  toRefs,
  watch,
  onBeforeUnmount,
} from "vue";
import { validate } from "@/utils/validate";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const injectMessage = inject("$message");
const is_test = inject("$is_test"); // 是否是测试验证码
let { userInfo } = toRefs(userStore);

let account_type = route.query.account_type;
let visible = ref(false);
let accountName = ref("");
let code = ref("");
let qrcode_url = ref("");
let is_back = ref(0);
let loading = ref(true);

let account = ref("");
let real_name = ref("");
let selectValue = ref("");
let mobile = ref("");
let options = ref([]);
let value2 = ref(true);
let is_submit = ref(false);

watch(visible, (newVal) => {
  //   real_name.value = "";
  code.value = "";
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  codeTime.value = 60;
  codeText.value = "获取验证码";
  is_code.value = false;
});

onMounted(() => {
  if (account_type == "wx") {
    accountName = "微信";
    visible.value = true;
  } else if (account_type == "alipay") {
    accountName = "支付宝";
    visible.value = true;
  } else if (account_type == "bank") {
    is_back.value = 1;
    accountName = "银行卡";
    getCardName();
  }
  getCardList();
  getIsBind();
});
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
// 获取验证码
let codeText = ref("获取验证码");
let timer = ref(null);
let codeTime = ref(60);
let is_code = ref(false);
function getCode() {
  if (is_code.value) return;
  is_code.value = true;
  post5b5bdc44796e8({
    mobile: userInfo.value.phone,
    type: 7,
    is_test: is_test,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        if (is_test == 1) {
          injectMessage.success(`验证码为：${res.data.code}`);
        } else {
          injectMessage.success("验证码发送成功");
        }
        timer.value = setInterval(() => {
          codeText.value = `${codeTime.value}s`;
          if (codeTime.value <= 1) {
            codeText.value = "获取验证码";
            clearInterval(timer.value);
            codeTime.value = 0;
            is_code.value = false;
          } else {
            codeTime.value--;
          }
        }, 1000);
      } else {
        is_code.value = false;
      }
    })
    .catch((err) => {
      is_code.value = false;
    });
}
// 查询账号是否绑定
let bindStatus = ref({});
function getIsBind() {
  post6620fd4f2ec24({})
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        bindStatus.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 查询银行卡名称  post6620dcb7cb59a
function getCardName() {
  post6620dcb7cb59a({})
    .then((res) => {
      if (res.code == 1) {
        let arr = [];
        if (res.data.length > 0) {
          res.data.forEach((item, index) => {
            arr.push({
              value: item.yinxingmingcheng,
              label: item.yinxingmingcheng,
            });
          });
        }
        options.value = arr;
        visibleAddCard.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 已绑定银行卡列表
let cardList = ref([]);
function getCardList() {
  post6620dc2684fd2({})
    .then((res) => {
      if (res.code == 1) {
        cardList.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 查看单个银行卡信息
let cardInfo = ref({});
let is_edit_card = ref(false); // 是否修改银行卡
function goCardDetails(aid) {
  post6621071b9ad6f({
    aid: aid,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        cardInfo.value = res.data;
        account.value = res.data.account;
        real_name.value = res.data.real_name;
        selectValue.value = res.data.bank_name;
        mobile.value = res.data.shoujihao;
        if (res.data.is_default == 1) {
          value2.value = true;
        } else {
          value2.value = false;
        }
        visibleCard.value = false;
        visibleAddCard.value = true;
        is_edit_card.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

function edit(type) {
  if (type == 1) {
    accountName = "微信";
    account_type = "wx";
    getWxinorAlipay();
  } else if (type == 2) {
    accountName = "支付宝";
    account_type = "alipay";
    getWxinorAlipay();
  } else if (type == 3) {
    accountName = "银行卡";
    visibleCard.value = true;
  }
}
// 获取绑定账号信息
function getWxinorAlipay() {
  post65f0402ea59bf({
    account_type: account_type,
  })
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        qrcode_url.value = res.data.qrcode_url;
        real_name.value = res.data.real_name;
        visible.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

// 关闭弹窗
function closePopup() {
  visible.value = false;
  visibleCard.value = false;
  visibleAddCard.value = false;
}

//绑定或修改微信、支付宝
function getSubmit() {
  if (!code.value) {
    injectMessage.error("请输入验证码");
    return;
  }
  if (!real_name.value) {
    injectMessage.error("请输入真实姓名");
    return;
  }
  if (!qrcode_url.value) {
      injectMessage.error('请上传收款二维码');
      return;
  }
  post661f9ea1b8701({
    account_type: account_type,
    real_name: real_name.value,
    account: userInfo.value.phone,
    qrcode_url: qrcode_url.value,
    code: code.value,
  })
    .then((res) => {
      if (res.code == 1) {
        injectMessage.success(res.msg);
        visible.value = false;
        getIsBind();
      } else {
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let visibleCard = ref(false);

// 绑定银行卡
let visibleAddCard = ref(false);
function bindCard() {
  visibleCard.value = false;
  visibleAddCard.value = true;
}
// 添加银行卡
function addCard() {
  if (is_submit.value) return;
  if (!selectValue.value) {
    injectMessage.error("请选择银行名称");
    return;
  }
  if (!account.value) {
    injectMessage.error("请输入银行卡号");
    return;
  }
  if (!real_name.value) {
    injectMessage.error("请输入真实姓名");
    return;
  }
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  is_submit.value = true;
  visibleAddCard.value = false;
  if (!is_edit_card.value) {
    post6620db8c64a54({
      real_name: real_name.value,
      account: account.value,
      bank_name: selectValue.value,
      shoujihao: mobile.value,
      is_default: value2.value ? 1 : 0,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success(res.msg);
          is_submit.value = false;
          if (is_back.value == 1) {
            router.go(-1);
          }
        } else {
          is_submit.value = false;
        }
      })
      .catch((err) => {
        is_submit.value = false;
      });
  } else {
    post6620dbd633daa({
      aid: cardInfo.value.aid,
      real_name: real_name.value,
      account: account.value,
      bank_name: selectValue.value,
      shoujihao: mobile.value,
      is_default: value2.value ? 1 : 0,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success(res.msg);
          is_submit.value = false;
        } else {
          is_submit.value = false;
        }
        is_edit_card.value = false;
      })
      .catch((err) => {
        is_submit.value = false;
      });
  }
}

// 解绑 银行卡
let modal = ref(null);
function unbindCard() {
  visibleAddCard.value = false;
  modal.value.openModal();
}
function modalConfirm() {
  post6620e56ddc277({
    aid: cardInfo.value.aid,
  })
    .then((res) => {
      if (res.code == 1) {
        injectMessage.success(res.msg);
        getCardList();
        getIsBind();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}


function handleFiles(e) {
  // 获取配置信息
  post662092c66ee3c({}).then((res) => {
    if (res.data) {
      for (let i = 0; i < e.target.files.length; i++) {
        // 执行上传
        let file = e.target.files[i];
        let filename = file.name;
        let fileSize = file.size; // b
        let ossData = res.data;
        let formData = new FormData();
        let key = ossData.dir + filename;
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        // 判断上传的视频是否超过500M
        if (fileSize > 5 * 1024 * 1024) {
          injectMessage.error("图片大小不得超过5M");
          return false;
        }
        // let random = Math.floor(Math.random() * 900) + 100;  // 生成随机数
        formData.append("OSSAccessKeyId", ossData.accessKeyId);
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("Filename", filename);
        formData.append("key", ossData.dir + filename);
        formData.append("success_action_status", "200");
        formData.append("file", file);

        axios.post(ossData.host, formData, config).then((res) => {
          if (res.status == 200) {
            qrcode_url.value = ossData.host + "/" + ossData.dir + filename;
          }
        });
      }
    } else {
      injectMessage.error("获取上传配置信息失败");
    }
  });
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  margin-top: 110px;
  margin-bottom: 24px;
  .account_item {
    width: 400px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item_img {
      display: flex;
      align-items: center;
      img {
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
      .item_name {
        display: flex;
        align-items: left;
        justify-content: center;
        flex-direction: column;
        .name_1 {
          font-size: 9px;
          font-weight: 500;
        }
        .name_2 {
          font-size: 8px;
          color: #999;
          // margin-top: 6px;
        }
      }
    }
    .btn_1 {
      width: 50px;
      height: 20px;
      background: #edf1f9;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #1f52ae;
      border-radius: 3px;
      font-size: 8px;
      color: #1f52ae;
      cursor: pointer;
    }
    .btn_2 {
      width: 50px;
      height: 20px;
      background: #1f52ae;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #1f52ae;
      border-radius: 3px;
      font-size: 8px;
      color: #fff;
      cursor: pointer;
    }
  }
}

.modal_content {
  background: #fff;
  width: 400px;

  .modal_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: bold;
    height: 28px;
    background: #1f52ae;
    padding: 0 12px 0 16px;
    color: #fff;
    img {
      width: 8px;
      height: 8px;
      cursor: pointer;
    }
  }
  .input_content {
    padding: 2px 32px 16px;
    .input_item {
      display: flex;
      margin-top: 16px;
      .target_name {
        font-size: 8px;
        font-weight: 500;
        width: 32px;
      }
      .input_one {
        .one_1 {
          font-size: 8px;
          font-weight: 500;
        }
        .one_2 {
          .one_2_1 {
            font-size: 8px;
            color: #999;
          }
          .one_2_2 {
            color: #1f52ae;
            font-size: 8px;
          }
        }
        .one_3 {
          display: flex;
          margin-top: 12px;
          .one_3_1 {
            width: 232px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid #e5e5e5;
            font-size: 7px;
            margin-right: 8px;
          }
          .one_3_2 {
            background: #edf1f9;
            border: 1px solid #1f52ae;
            border-radius: 2px;
            width: 60px;
            height: 20px;
            color: #1f52ae;
            font-size: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
      .input_two {
        .two_1 {
          font-size: 8px;
          font-weight: 500;
        }
        .two_2 {
          width: 40px;
          height: 40px;
          margin-top: 12px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .two_3 {
          font-size: 6px;
          color: #999;
          margin-top: 6px;
        }
      }
      .input_three {
        flex: 1;
        .three_1 {
          font-size: 8px;
          font-weight: 500;
        }
        .three_2 {
          margin-top: 12px;
          width: 100%;
          height: 20px;
          border-radius: 2px;
          border: 1px solid #e5e5e5;
          font-size: 7px;
        }
      }
    }
    .submit {
      margin: 20px auto 0;
      width: 120px;
      height: 24px;
      border-radius: 3px;
      background: #1f52ae;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: #fff;
      cursor: pointer;
    }
  }
  .no_card {
    margin: 35px auto 0;
    text-align: center;
    img {
      width: 132px;
      height: 132px;
    }
    .no_text {
      font-size: 8px;
      color: #666;
    }
  }
  .card_list {
    padding: 16px 20px 0;
    height: 200px;
    .card_item {
      background: #f2f6fd;
      padding: 12px 7.5px 12px 12px;
      margin-bottom: 10px;
      cursor: pointer;
      .card_name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .card_name_text {
          font-size: 9px;
          .card_default_text {
            display: inline-block;
            width: 22px;
            height: 10px;
            border-radius: 2px;
            border: 1px solid #1f52ae;
            color: #1f52ae;
            font-size: 7px;
            line-height: 10px;
            text-align: center;
            margin-left: 5px;
          }
        }
        .card_name_icon {
          width: 10px;
          height: 10px;
        }
      }
      .card_number {
        font-size: 10px;
        font-weight: 500;
        margin-top: 10px;
      }
      .card_date {
        font-size: 7px;
        color: #999;
        margin-top: 9px;
      }
    }
  }
  .from_value {
    padding: 20px 32px 0;
    .from_item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .from_item_le {
        width: 32px;
        font-size: 8px;
        margin-right: 16px;
      }
      .from_item_ri {
        flex: 1;
        height: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        font-size: 7px;
      }
    }
    .set_card {
      margin-top: 12px;
      font-size: 7px;
      font-weight: 500;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .set_card_text {
        margin-right: 5px;
      }
      .ml-2 {
        width: 16px !important;
        height: 8px !important;
      }
    }
  }
  .bind_btn {
    width: 120px;
    height: 24px;
    border-radius: 3px;
    background: #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    cursor: pointer;
    margin: 25px auto 16px;
  }
}
.edit_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 16px;
  .edit_btn_1 {
    width: 90px;
    height: 24px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #1f52ae;
    cursor: pointer;
  }
  .edit_btn_2 {
    width: 90px;
    height: 24px;
    border-radius: 3px;
    background: #1f52ae;
    border: 1px solid #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    cursor: pointer;
    margin-left: 12px;
  }
}
</style>